<template>
	<view class="my-container">
		<topBack title="推荐产品" bgColor="#F9F9F9">
			<text>完成</text>
		</topBack>
		<u-image src="../../../static/wenjuan/wenjuan-prod-banner.png" width="686" height="244" class="margin-32"></u-image>
		<view class="plr-32 mt-48">
			<view class="mb-36 title-border-left-12 font-32 font-weight-600 line-height-48">
				{{getProdTitle()}}
			</view>
			<view v-for="item in list" :key="item.id" class="prod-item flex flex-a-start mtb-24">
				<u-image :src="ossUrl + item.shopImage" width="224" height="224" :fade="true" duration="450" radius="24"
					:lazy-load="true" class="mr-24"></u-image>
				<view class="flex flex-column flex-j-bt" style="height:224rpx">
					<view class="font-32 line-height-48 font-weight-600">{{item.prodName}}</view>
					<view class="font-24 color-999 ellipsis-1" style="width:438rpx">{{item.tagList.join('，')}}</view>
					<view class="flex flex-a-center flex-j-bt">
						<view class="font-number font-32 line-height-48 color-error font-weight-600"><text
								class="font-24 mr-6">¥</text>
							{{item.salePrice}}
						</view>
						<view class="shopcartIcon" @click.stop="addCart(item)">
							<u-icon name="shopping-cart" color="#fff" size="40"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<empty v-if="!loading"></empty>
			<view class="height-100 flex flex-center font-24 color-999">
				{{showNoMore?'- 没有更多了 -':loading?'加载中...':''}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCache
	} from "@/src/utils/wenjuanHooks.js"
	import {
		getProdIdList,
		getProdList
	} from "@/src/service/wenjuan.js"
	import {
		ossUrl,
		newGoodsList,
	} from '../../utils/tools.js'
	export default {
		data() {
			return {
				ossUrl,
				page: 1,
				list: [],
				showNoMore: false,
				prodIds: [],
				loading: true,
			}
		},
		onLoad() {
			this.getIdList()
		},
		methods: {
			getProdTitle() {
				const itemName = getCache('itemName')
				if (itemName.includes('健康状况')) {
					return '改善健康状况'
				} else if (itemName.includes('营养目标')) {
					return '改善身形管理、免疫力、胃肠道功能、睡眠、心脑血管、骨骼/关节'
				} else if (itemName.includes('饮食习惯')) {
					return '改善饮食习惯'
				} else if (itemName.includes('生活习惯')) {
					return '改善生活习惯'
				} else {
					return '改善' + (itemName || '健康状况')
				}
			},
			async getIdList() {
				const {
					age,
					gender,
					height,
					itemIds,
					pid,
					weight
				} = getCache()
				const {
					data
				} = await getProdIdList({
					age,
					gender,
					height,
					itemIds,
					pid,
					weight
				})
				if (data && data.length) {
					// 通过产品ID查产品
					this.prodIds = data;
					this.getProdList()
				}
			},
			async getProdList() {
				if (this.page == 1) {
					this.showNoMore = false;
				}

				if (this.showNoMore) {
					this.page > 1 && (this.page--)
					return
				}
				if (this.page == 1) {
					this.list = [];
				}
				this.loading = true;
				const {
					data
				} = await getProdList(this.page, this.prodIds).catch(() => {
					this.page--
				}).finally(() => {
					this.loading = false;
				})
				if (!data?.list || !data?.list.length) {
					this.page > 1 && (this.page--)
					this.showNoMore = true;
					return
				} else {
					this.showNoMore = false;
					this.list.push(...newGoodsList(data.list));
				}
				if (data.total <= this.list.length) {
					this.showNoMore = true;
				}
			},
			toyszc() {
				console.log(123)
			},
			begin() {
				if (!this.checked) {
					uni.showToast({
						title: '请阅读并同意隐私政策',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/src/pages/wenjuanBaseinfo/wenjuanBaseinfo'
				})
			}
		},
		// 页面触底
		onReachBottom() {
			this.page++
			this.getProdList();
		},
	}
</script>

<style scoped lang="scss">
	.my-container {
		background-color: #F9F9F9;
		padding-bottom: 48rpx;

		.shopcartIcon {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background-color: #F74F4F;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>